<template>
    <basic-container>
        <el-button type="primary" @click="option.switchTheme=!option.switchTheme" size="small">打开主题</el-button>
        <el-button @click="theme='macarons'" size="small">换紫色主题</el-button>
        <el-button @click="theme='wonderland'" size="small">换绿色主题</el-button>
        <avue-echart-line :theme="theme" :option="option" :data="data" width="1000"></avue-echart-line>
    </basic-container>
</template>

<script>
    export default {
        data() {
            return {
                theme:'',
                data:{
                    categories: [
                        "苹果",
                        "三星",
                        "华为",
                        "oppo",
                        "vivo",
                        "小米"
                    ],
                    series: [
                        {
                            name: "手机品牌",
                            data: [
                                1000879,
                                678564,
                                897744,
                                439087,
                                478900,
                                390877
                            ]
                        }, {
                            name: "其他手机品牌",
                            data: [
                                2000879,
                                678564,
                                897744,
                                439087,
                                478900,
                                390877
                            ]
                        }
                    ]
                },
                option: {
                    switchTheme:true,
                    width: 1200,
                    height: 600,
                    title: '手机大比拼',
                    smooth: true,//是否顺滑
                    areaStyle: true,//是否面积
                }
            }
        },
        computed: {
            option(){
                return{

                }
            }
        },
        mounted(){
        },

        methods:{

        }
    }
</script>

<style>
</style>
